// InputNumber

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin input-number {
  width: 100%;
  @include flex();
  > label {
    display: inline-block;
    white-space: nowrap;
    height: $--x-input-number-height;
    line-height: $--x-input-number-height;
    position: relative;
    color: $--x-text-300;
    font-weight: 600;
    @include text-align();
  }
  > .#{$--x-input-number-prefix}-row {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    height: $--x-input-number-height;
    line-height: $--x-input-number-height;
    > input {
      padding: $--x-input-number-padding;
      flex: 1;
      height: $--x-input-number-height;
      text-align: center;
      line-height: $--x-input-number-height;
      width: 100%;
      font-size: $--x-input-number-font-size;
      background-color: $--x-input-number-background-color;
      background-image: none;
      border: $--x-input-number-border;
      transition: all $--x-animation-duration-slow;
      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        appearance: none;
      }
      @include placeholder();
      &:hover {
        z-index: 1;
        @include hover();
      }
      &:focus {
        z-index: 1;
        @include focus();
        outline: 0;
      }
    }
    > x-button {
      position: relative;
      height: inherit;
      &.#{$--x-input-number-prefix}-plus {
        > .button {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
      &.#{$--x-input-number-prefix}-reduce {
        > .button {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
      &:hover,
      &:focus {
        z-index: 1;
      }
    }
  }
  &.x-invalid,
  &.x-required {
    > label {
      color: $--x-danger;
    }
    > .#{$--x-input-number-prefix}-row {
      @include border-error();
    }
  }
  &.x-disabled {
    > .#{$--x-input-number-prefix}-row {
      > #{$--x-prefix}-icon {
        color: $--x-text-400;
      }
      > input {
        color: $--x-text-400;
        cursor: not-allowed;
        border-color: $--x-border-100;
        background-color: $--x-background-a100;
      }
    }
  }
  &.x-flex {
    &.x-direction {
      &-row {
        > label {
          padding: 0 0.5rem 0 0;
        }
      }
      &-row-reverse {
        > label {
          padding: 0 0 0 0.5rem;
        }
      }
      &-column {
        align-items: inherit;
      }
      &-column-reverse {
        align-items: inherit;
      }
    }
  }
  &-max-length {
    position: absolute;
    font-size: $--x-font-size-small;
    color: $--x-text-500;
    padding: $--x-input-number-padding;
    right: 0;
  }
  &-icon {
    > .#{$--x-input-number-prefix}-row {
      > #{$--x-prefix}-icon {
        position: absolute;
        font-size: $--x-input-number-icon-font-size;
        padding: $--x-input-number-icon-padding;
      }
    }
  }
  &-icon-left {
    > .#{$--x-input-number-prefix}-row {
      > input {
        padding-left: calc(#{$--x-input-number-icon-font-size} + calc(#{$--x-input-number-icon-padding} * 2));
      }
      > #{$--x-prefix}-icon {
        left: 0;
      }
    }
  }
  &-iconRight {
    > .#{$--x-input-number-prefix}-row {
      > input {
        padding-right: calc(#{$--x-input-number-icon-font-size} + calc(#{$--x-input-number-icon-padding} * 2));
      }
      > #{$--x-prefix}-icon {
        right: 0;
      }
      > .#{$--x-input-number-prefix}-max-length {
        right: inherit;
        left: 0;
      }
    }
  }
}
